
import React, { useEffect, useState } from 'react';
import { Card} from 'antd';
import PageHeader from '../../components/PageHeader';
import axios from 'axios';

import { Col, Row,List } from 'antd';
import  _ from 'lodash'

export default function News() {
    const [newsList, setNewsList] = useState([])
    useEffect(()=>{
        axios.get("http://localhost:3000/news?publishState=2&_expand=category").then(res=>{
            setNewsList(Object.entries(_.groupBy(res.data,item=>item.category.title)))
        });
    },[])
    return (
        <div>
            <PageHeader
                title="全球新闻"
            />
            <Row gutter={[16, 16]}>
                {
                    newsList.map(item=>
                    <Col span={8} key={item[0]}>
                        <Card title={item[0]} variant="borderless" hoverable={true}>
                        <List
                        bordered
                        pagination={
                            {
                                pageSize:3
                            }
                        }
                        dataSource={item[1]}
                        renderItem={data => (
                            <List.Item>
                                <a href={`#/detail/${data.id}`}>{data.title}</a>
                            </List.Item>
                        )}
                        />
                        </Card>
                    </Col>)
                }
            </Row>
        </div>
    );
};
